<script setup>
import { ref } from "vue";
import { getProductDetailApi, getCommentListApi } from "../../api/product";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores";
import { addCartApi } from "@/api/cart";

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const detailData = ref({});
const commentList = ref([]);
const type = ref("");
const count = ref(1);
const goodsId = ref(0);
const showActionSheet = ref(false);
const skuId = ref(0);
const cartNum = ref(0);

const getProDetailData = async () => {
  const res = await getProductDetailApi(route.params.goodsId);
  goodsId.value = res.data.detail.goods_id;
  skuId.value = res.data.detail.skuList[0].goods_sku_id;
  detailData.value = res.data.detail;
};
const getCommentList = async () => {
  const res = await getCommentListApi(route.params.goodsId, 3);
  commentList.value = res.data.list;
};
getProDetailData();
getCommentList();
const addCart = () => {
  showActionSheet.value = true;
  type.value = "cart";
};
const buyNow = () => {
  showActionSheet.value = true;
  type.value = "buy";
};
const onClick = async () => {
  if (userStore.isLogin()) {
    if (type.value === "cart") {
      const {
        data: { cartTotal },
      } = await addCartApi(goodsId.value, count.value, skuId.value);
      cartNum.value = cartTotal;
      showActionSheet.value = false;
      showSuccessToast("添加成功");
    } else {
      router.push({
        path: "/pay",
        query: {
          mode: "buyNow",
          goodsId: goodsId.value,
          goodsNum: count.value,
          goodsSkuId: skuId.value,
        },
      });
    }
  } else {
    await showConfirmDialog({
      title: "温馨提示",
      message: "您还没登录，请先登录",
    });
    router.push({ path: "/login", query: { redirect: route.path } });
  }
};
</script>

<template>
  <div class="prodetail">
    <van-nav-bar title="商品详情页" left-arrow @click-left="$router.back()" />

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item
        v-for="item in detailData.goods_images"
        :key="item.external_url"
      >
        <img :src="item.external_url" width="100%" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <div class="info">
      <div class="title">
        <div class="price">
          <span>￥{{ detailData.line_price_min }}</span>
          <span>￥{{ detailData.line_price_max }}</span>
        </div>
        <div class="sellcount">已售{{ detailData.goods_sales }}</div>
      </div>
      <div class="msg">
        {{ detailData.goods_name }}
      </div>
      <div class="service">
        <div class="left">
          <span><i class="iconfont icon-dagou"></i> 七天无理由退货</span>
          <span><i class="iconfont icon-dagou"></i> 48小时发货</span>
        </div>
        <div class="right"><i class="iconfont icon-youjiantou"></i></div>
      </div>
    </div>

    <div class="comment">
      <div class="comment-title">
        <div class="left">商品评价({{ commentList.length }}条)</div>
        <div class="right">
          查看更多<i class="iconfont icon-youjiantou"></i>
        </div>
      </div>
      <div class="comment-list">
        <div
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="top">
            <img
              :src="
                item.user.avatar_url ||
                'https://img2.baidu.com/it/u=2655805762,3342508186&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
              "
              alt=""
            />
            <p>{{ item.user.nick_name }}</p>
            <van-rate v-model="item.score" />
          </div>
          <div class="content">{{ item.content }}</div>
          <div class="time">{{ item.create_time }}</div>
        </div>
      </div>
    </div>
  </div>

  <van-action-bar>
    <van-action-bar-icon icon="wap-home-o" text="首页" />
    <van-action-bar-icon
      icon="shop-o"
      text="购物车"
      :badge="cartNum == 0 ? '' : cartNum"
    />
    <van-action-bar-button
      color="#be99ff"
      type="warning"
      text="加入购物车"
      @click="addCart"
    />
    <van-action-bar-button
      color="#7232dd"
      type="danger"
      text="立即购买"
      @click="buyNow"
    />
  </van-action-bar>

  <!-- 动作面板 -->
  <van-action-sheet
    v-model:show="showActionSheet"
    :title="type === 'cart' ? '加入购物车' : '立即购买'"
  >
    <div class="content">
      <div class="top">
        <div class="left">
          <img :src="detailData.goods_image" alt="" />
        </div>
        <div class="right">
          <p>
            <span>￥</span>
            <span>{{ detailData.goods_price_min }}</span>
          </p>
          <p>库存:{{ detailData.stock_total }}</p>
        </div>
      </div>
      <div class="middle">
        <div>请输入数量</div>
        <van-stepper v-model="count" integer />
      </div>
      <div class="bottom">
        <van-button
          @click="onClick"
          v-if="detailData.stock_total !== 0"
          type="primary"
          block
          round
          :color="type === 'cart' ? '#FF9402' : '#FE5630'"
          >{{ type === "cart" ? "加入购物车" : "立即购买" }}</van-button
        >
        <van-button type="primary" block round color="#CCCCCC" v-else
          >商品已卖完</van-button
        >
      </div>
    </div>
  </van-action-sheet>
</template>

<style scoped lang="scss">
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.prodetail {
  padding-bottom: 55.2px;
  .info {
    padding: 10px;
    .title {
      display: flex;
      align-items: center;
      line-height: 30px;
      justify-content: space-between;
      .price {
        span:nth-child(1) {
          font-size: 20px;
          color: red;
          margin-right: 10px;
        }
      }
      .sellcount {
        color: grey;
      }
    }
    .msg {
      line-height: 25px;
      font-size: 16px;
      word-break: break-all;
      overflow-wrap: break-word;
      margin-top: 10px;
    }
    .service {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      background-color: rgb(251, 249, 249);
      line-height: 40px;
      .left {
        span {
          font-size: 16px;
          i {
            color: red;
          }
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .comment {
    padding: 10px;
    .comment-title {
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      .right {
        color: #aeadad;
      }
    }
    .comment-list {
      .comment-item {
        line-height: 30px;
        .top {
          display: flex;
          align-items: center;
          gap: 10px;
          img {
            width: 18px;
            height: 18px;
          }
          p {
            font-size: 16px;
          }
        }
        .content {
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 显示省略号 */
        }
        .time {
          font-size: 12px;
          color: grey;
        }
      }
    }
  }
}
.van-popup {
  .content {
    .top {
      padding: 10px;
      display: flex;
      .left {
        img {
          display: block;
          width: 100px;
          height: 100px;
        }
      }
      .right {
        margin-left: 10px;
        flex: 1;
        p:nth-child(1) {
          color: orangered;
          span:nth-child(2) {
            font-size: 24px;
          }
        }
        p:nth-child(2) {
          margin-top: 8px;
        }
      }
    }
    .middle {
      padding: 10px;
      line-height: 30px;
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      padding: 10px;
    }
  }
}
</style>
